<template>
  <div class="bgc-white p16">
    <div class="mb16">
      <a-range-picker
        :value="dateRange"
        :placeholder="['开始月份', '结束月份']"
        :mode="['month', 'month']"
        format="YYYY-MM"
        style="width: 240px"
        @panelChange="onPanelChange"
      />
    </div>
    <div v-if="countDetail" class="title-block mb12">合计情况</div>
    <div v-if="countDetail" class="flex-center mb16">
      <div
        v-for="li in hjLst"
        :key="li.key"
        class="p12 mr16 pointer flex-center-between br4"
        :style="{
          background: li.ff === feedbackFlag ? 'var(--primary77)' : 'rgba(250, 250, 250, 1)',
          width: '20%'
        }"
        @click="setFeedbackFlag(li.ff)"
      >
        <div :class="{ 'tc-white': li.ff === feedbackFlag }">
          <div>{{ li.title }}</div>
          <div class="fs16 fw500 mt8 flex-center">
            <div
              v-if="li.ff === feedbackFlag"
              class="mr8"
              style="width: 8px; height: 8px; border-radius: 4px"
              :style="{ background: '#fff' }"
            ></div>
            <div v-else class="mr8" style="width: 8px; height: 8px; border-radius: 4px" :style="{ background: li.color }"></div>
            {{ countDetail[li.key] || 0 }}
          </div>
        </div>
        <img v-if="li.ff === feedbackFlag" src="@/assets/icons/订单1.png" class="ml16" style="width: 40px; height: 40px" />
        <img v-else :src="li.icon" class="ml16" style="width: 40px; height: 40px" />
      </div>
    </div>
    <div class="title-block mb16">接单情况</div>
    <div class="mb16 flex-center-between">
      <a-input-search v-model="nameOrIdCard" placeholder="搜索姓名/身份证号" style="width: 300px" @change="loadCounts" />
      <a-button :disabled="selectedRowKeys.length === 0" type="primary" @click="doBatch">批量反馈</a-button>
    </div>
    <ShebaoJiedanTable
      ref="table"
      :selectedRowKeys.sync="selectedRowKeys"
      :nameOrIdCard="nameOrIdCard"
      :beginTime="beginTime"
      :endTime="endTime"
      :feedbackFlagParams="feedbackFlag"
      @loaded="loadCounts"
    />
  </div>
</template>
<script>
import ShebaoJiedanTable from "./table.vue";

const hjLst = [
  {
    title: "总接单人数",
    key: "allCount",
    icon: require("@/assets/icons/h.png"),
    ff: null,
    color: "var(--primary)"
  },
  {
    title: "待反馈人数",
    key: "toBeFedBackCount",
    icon: require("@/assets/icons/订单4.png"),
    ff: -1,
    color: "rgba(255, 187, 0, 1)"
  },
  {
    title: "已反馈人数",
    key: "succeedFeedbackCount",
    icon: require("@/assets/icons/订单3.png"),
    ff: 1,
    color: "rgba(50, 204, 170, 1)"
  },
  {
    title: "失败反馈人数",
    key: "failFeedbackCount",
    icon: require("@/assets/icons/订单2.png"),
    ff: 2,
    color: "rgba(255, 112, 133, 1)"
  }
];

export default {
  name: "",
  components: {
    ShebaoJiedanTable
  },
  mixins: [],
  props: {},
  data() {
    return {
      hjLst,
      nameOrIdCard: "",
      dateRange: null,
      beginTime: "",
      endTime: "",
      countDetail: null,
      feedbackFlag: null,
      selectedRowKeys: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadCounts();
  },
  mounted() {},
  methods: {
    doBatch() {
      if (this.$refs.table) {
        this.$refs.table.doBatch();
      }
    },
    setFeedbackFlag(val) {
      this.feedbackFlag = val;
    },
    loadCounts() {
      const params = {};
      if (this.nameOrIdCard) {
        params["nameOrIdCard"] = this.nameOrIdCard;
      }
      if (this.beginTime) {
        params["beginTime"] = this.beginTime;
      }
      if (this.endTime) {
        params["endTime"] = this.endTime;
      }
      this.$request({
        url: `/hr/api/v1/socPlanDispatchUsers/taskOrderUserCount`,
        params
      })
        .then((res) => {
          this.countDetail = res.data;
        })
        .catch((err) => {
          console.log("taskOrderUserCount", err);
        });
    },
    onPanelChange(value) {
      this.dateRange = value;
      if (this.dateRange && this.dateRange.length > 0) {
        const dates = this.dateRange.map((item) => item.format("YYYY-MM"));
        this.beginTime = dates[0];
        this.endTime = dates[1];
        this.loadCounts();
      }
    }
  }
};
</script>
<style lang="scss"></style>
